<template>
	<el-tabs v-model="activeName">
		<!-- 属性设置面板 -->
		<el-tab-pane label="属性设置" name="field">
			<sc-form-table ref="fieldTable" v-model="fieldList" :hideAdd="true" :hideDelete="true" drag-sort placeholder="暂无数据">
				<el-table-column label="主键" prop="primaryPk" width="80" show-overflow-tooltip>
					<template #default="{ row }">
						<el-checkbox v-model="row.primaryPk" true-label="1" false-label="0" disabled></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column label="字段名" prop="fieldName" show-overflow-tooltip></el-table-column>
				<el-table-column label="说明" prop="fieldComment" show-overflow-tooltip>
					<template #default="{ row }">
						<el-input v-model="row.fieldComment" placeholder="请输入说明"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="字段类型" prop="fieldType" show-overflow-tooltip></el-table-column>
				<el-table-column label="属性名" prop="attrName" show-overflow-tooltip>
					<template #default="{ row }">
						<el-input v-model="row.attrName" placeholder="请输入属性名"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="属性类型" prop="attrType" show-overflow-tooltip>
					<template #default="{ row }">
						<el-select v-model="row.attrType" placeholder="请选择属性类型" @change="handleChangeRow(row)">
							<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="自动填充" prop="autoFill" show-overflow-tooltip>
					<template #default="{ row }">
						<el-select v-model="row.autoFill" placeholder="请选择类型">
							<el-option v-for="item in fillList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="字典类型" prop="fieldDict" show-overflow-tooltip>
					<template #default="{ row }">
						<el-select v-model="row.fieldDict" placeholder="请选择类型" filterable clearable :disabled="row.primaryPk === '1'">
							<el-option v-for="item in fieldDictList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</template>
				</el-table-column>
			</sc-form-table>
		</el-tab-pane>
		<!-- 列表设置面板 -->
		<el-tab-pane label="列表查询" name="third">
			<sc-form-table ref="gridTable" v-model="fieldList" :hideAdd="true" :hideDelete="true" placeholder="暂无数据">
				<el-table-column label="属性名" prop="attrName" show-overflow-tooltip></el-table-column>
				<el-table-column label="说明" prop="fieldComment" show-overflow-tooltip></el-table-column>
				<el-table-column label="列表显示" prop="gridItem" width="100" show-overflow-tooltip>
					<template #default="{ row }">
						<el-checkbox v-model="row.gridItem" true-label="1" false-label="0" :disabled="row.primaryPk === '1'"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column label="是否排序" prop="gridSort" width="100" show-overflow-tooltip>
					<template #default="{ row }">
						<el-checkbox v-model="row.gridSort" true-label="1" false-label="0" :disabled="row.primaryPk === '1'"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column label="查询显示" prop="gridSort" width="100" show-overflow-tooltip>
					<template #default="{ row }">
						<el-checkbox v-model="row.queryItem" true-label="1" false-label="0" :disabled="row.primaryPk === '1'"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column label="查询表单类型" prop="queryFormType" show-overflow-tooltip>
					<template #default="{ row }">
						<el-select v-model="row.queryFormType" placeholder="请选择查询表单类型" :disabled="row.primaryPk === '1'">
							<el-option v-for="item in queryTypeList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="查询方式" prop="queryType" show-overflow-tooltip>
					<template #default="{ row }">
						<el-select v-model="row.queryType" placeholder="请选择查询方式" :disabled="row.primaryPk === '1'">
							<el-option v-for="item in queryList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</template>
				</el-table-column>
			</sc-form-table>
		</el-tab-pane>
		<el-tab-pane label="表单页面" name="form">
			<sc-form-table ref="formTable" v-model="fieldList" :hideAdd="true" :hideDelete="true" placeholder="暂无数据">
				<el-table-column label="属性名" prop="attrName" show-overflow-tooltip></el-table-column>
				<el-table-column label="说明" prop="fieldComment" show-overflow-tooltip></el-table-column>
				<el-table-column label="表单类型" prop="formType" show-overflow-tooltip>
					<template #default="{ row }">
						<el-select v-model="row.formType" placeholder="请选择表单类型" :disabled="row.primaryPk === '1'">
							<el-option v-for="item in formTypeList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="是否显示" prop="formItem" width="100" show-overflow-tooltip>
					<template #default="{ row }">
						<el-checkbox v-model="row.formItem" true-label="1" false-label="0" :disabled="row.primaryPk === '1'"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column label="表单必填" prop="formRequired" width="100" show-overflow-tooltip>
					<template #default="{ row }">
						<el-checkbox v-model="row.formRequired" true-label="1" false-label="0" :disabled="row.primaryPk === '1'"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column label="表单效验" prop="formValidator" show-overflow-tooltip>
					<template #default="{ row }">
						<el-select v-model="row.formValidator" placeholder="请选择表单效验" :disabled="row.primaryPk === '1'">
							<el-option v-for="item in formValidatorList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</template>
				</el-table-column>
			</sc-form-table>
		</el-tab-pane>
	</el-tabs>
</template>

<script setup lang="ts">
import { useTableFieldSubmitApi, useTableApi, fetchDictList } from '/@/api/gen/table';
import { list } from '/@/api/gen/fieldtype';
import Sortable from 'sortablejs';

const scFormTable = defineAsyncComponent(() => import('/@/components/FormTable/index.vue'));

const activeName = ref();
const tableId = ref('');

const props = defineProps({
	tableName: {
		type: String,
	},
	dsName: {
		type: String,
	},
});

const visible = ref(false);

const sortable = ref() as any;

const typeList = ref([]) as any;
const fieldDictList = ref([]) as any;
const dsName = ref();
const tableName = ref();

const fieldList = ref([]);
const fillList = reactive([
	{ label: 'DEFAULT', value: 'DEFAULT' },
	{ label: 'INSERT', value: 'INSERT' },
	{ label: 'UPDATE', value: 'UPDATE' },
	{ label: 'INSERT_UPDATE', value: 'INSERT_UPDATE' },
]);

const queryList = reactive([
	{ label: '=', value: '=' },
	{ label: '!=', value: '!=' },
	{ label: '>', value: '>' },
	{ label: '>=', value: '>=' },
	{ label: '<', value: '<' },
	{ label: '<=', value: '<=' },
	{ label: 'like', value: 'like' },
	{ label: 'left like', value: 'left like' },
	{ label: 'right like', value: 'right like' },
]);

const formTypeList = reactive([
	{ label: '单行文本', value: 'text' },
	{ label: '多行文本', value: 'textarea' },
	{ label: '数字', value: 'number' },
	{ label: '富文本编辑器', value: 'editor' },
	{ label: '下拉框', value: 'select' },
	{ label: '单选按钮', value: 'radio' },
	{ label: '复选框', value: 'checkbox' },
	{ label: '日期', value: 'date' },
	{ label: '日期时间', value: 'datetime' },
	{ label: '文件上传', value: 'upload-file' },
	{ label: '图片上传', value: 'upload-img' },
]);

const queryTypeList = reactive([
	{ label: '单行文本', value: 'text' },
	{ label: '多行文本', value: 'textarea' },
	{ label: '数字', value: 'number' },
	{ label: '下拉框', value: 'select' },
	{ label: '单选按钮', value: 'radio' },
	{ label: '复选框', value: 'checkbox' },
	{ label: '日期', value: 'date' },
	{ label: '日期时间', value: 'datetime' },
]);

const formValidatorList = reactive([
	{ label: '数字', value: 'number' },
	{ label: '字母', value: 'letter' },
	{ label: '字母和数字', value: 'letterAndNumber' },
	{ label: '手机号码', value: 'mobilePhone' },
	{ label: '字母开头，仅可包含数字', value: 'letterStartNumberIncluded' },
	{ label: '禁止中文输入', value: 'noChinese' },
	{ label: '必须中文输入', value: 'chinese' },
	{ label: '电子邮箱', value: 'email' },
	{ label: 'URL网址', value: 'url' },
]);

const propToType = reactive({
	tinyint: 'number',
	smallint: 'number',
	mediumint: 'number',
	int: 'number',
	integer: 'number',
	bigint: 'number',
	float: 'number',
	datetime: 'datetime',
	LocalDateTime: 'datetime',
	date: 'date',
	LocalDate: 'date',
	Long: 'number',
	Float: 'number',
	Double: 'number',
	BigDecimal: 'number',
	text: 'textarea',
	String: 'text',
	longtext: 'editor',
	bit: 'radio',
	Boolean: 'radio',
	char: 'radio',
	varchar: 'text',
});

const handleChangeRow = (row: any) => {
	row.queryFormType = propToType[row.attrType];
	row.formType = propToType[row.attrType];
};

const openDialog = (dName: string, tName: string) => {
	visible.value = true;
	tableName.value = tName;
	dsName.value = dName;

	activeName.value = 'field';

	rowDrop();
	getTable(dName, tName);
	getFieldTypeList();
	getDictList();
};

onMounted(() => {
	tableName.value = String(props.tableName);
	dsName.value = String(props.dsName);
	activeName.value = 'field';
	rowDrop();
	getTable(dsName.value, tableName.value);
	getFieldTypeList();
	getDictList();
});

const rowDrop = () => {
	nextTick(() => {
		const el: any = window.document.querySelector('#pane-field');
		sortable.value = Sortable.create(el, {
			handle: '.drag-btn',
			onEnd: (e: any) => {
				const { newIndex, oldIndex } = e;
				const currRow = fieldList.value.splice(oldIndex, 1)[0];
				fieldList.value.splice(newIndex, 0, currRow);
			},
		});
	});
};
const loading = ref(false);

const getTable = (dsName: string, tableName: string) => {
	fieldList.value = []; // 避免第一次数据初始化， 表格显示历史数据
	loading.value = true;
	useTableApi(dsName, tableName)
		.then((res) => {
			tableId.value = res.data.id;
			fieldList.value = res.data.fieldList.map((item) => {
				item.queryFormType ? item.queryFormType : propToType[item.fieldType];
				item.formType ? item.formType : propToType[item.fieldType];
				return item;
			});
		})
		.finally(() => {
			loading.value = false;
		});
};

const getFieldTypeList = async () => {
	typeList.value = [];
	// 获取数据
	const { data } = await list();
	// 设置属性类型值
	const typeMap = new Map();
	data.forEach((item: any) => {
		const { attrType, columnType } = item;
		if (!typeMap.has(attrType)) {
			typeMap.set(attrType, columnType);
			typeList.value.push({ label: attrType, value: attrType });
		}
	});
	// 增加Object类型
	typeList.value.push({ label: 'Object', value: 'Object' });
};

const getDictList = () => {
	fetchDictList().then((res) => {
		for (const item of res.data) {
			fieldDictList.value.push({ label: item.description, value: item.dictType });
		}
	});
};

// 表单提交
const submitHandle = () => {
	return new Promise((resolve) => {
		useTableFieldSubmitApi(dsName.value, tableName.value, fieldList.value).then(() => {
			resolve(tableId.value);
		});
	});
};

defineExpose({
	openDialog,
	submitHandle,
});
</script>

<style lang="scss">
.sortable-row-gen .drag-btn {
	cursor: move;
	font-size: 12px;
}

.sortable-row-gen .vxe-body--row.sortable-ghost,
.sortable-row-gen .vxe-body--row.sortable-chosen {
	background-color: #dfecfb;
}

.vxe-select–panel {
	z-index: 9997 !important;
}
</style>
